<template>
    <div>
        <div class="footBtn">
            <div>
                <slot name="left"></slot>
            </div>
            <div class="btn_group">
                <!-- 可以添加自己其他的按钮 -->
                <slot name="right"></slot>
                <el-button v-if="editButton" class="btn star" round @click="open('edit')"><i class="iconfont ss-code"></i>
                    高级编辑
                </el-button>
                <el-button v-if="programButton" class="btn plain" round @click="showCode"><i class="iconfont ss-code"></i> 查看小程序
                </el-button>
                <el-button v-if="screenButton" class="btn plain" round @click="open"><i class="iconfont ss-pc"></i>查看大屏
                </el-button>
                <el-button v-if="saveButton" class="btn" round type="primary" @click="save"><i class="iconfont ss-save"></i>保存
                </el-button>
            </div>
        </div>
        <el-dialog custom-class="definedModal" :visible="codeShow" append-to-body width="350px" top="150px"
                   @close="codeShow=false">
            <div style="text-align: center">
                <div style="text-align: center;color: #aaa;padding: 10px">微信扫描小程序码</div>
                <img style="width: 200px;height: 200px" :src="sourceHost+'/staticft/images/xcx/'+sceneId+'.png'" alt="">
                <div style="text-align: center;margin: 20px">
                    <el-button style="width: 100px;border-radius: 20px;" type="primary" @click="codeShow=false">确认</el-button>
                </div>
            </div>
        </el-dialog>
    </div>

</template>

<script>
    import env from '../../utils/env';

    export default {
        name: 'footerButtons',
        props: {
            pageNum: {
                default: undefined,  //如果是分页必须要传入pageNum
            },
            editButton: {
                default: false,          //如果需要高级编辑则传入true
            },
            programButton: {
                default: true,
            },
            screenButton: {
                default: true,
            },
            saveButton: {
                default: true,
            },
        },
        data() {
            return {
                codeShow: false,
                sceneId: '',
                sceneCode: '',
                sourceHost: env.sourceHost,
            };
        },
        mounted() {
            let sceneId = this.$route.query.sceneId;
            console.log('sceneID', sceneId, this.$route.query);
            let sceneList = JSON.parse(sessionStorage.getItem('sceneList'));
            sceneList.forEach(item => {
                item.sceneId === sceneId ? this.sceneCode = item.sceneCode : null;
            });
            this.sceneId = sceneId;
        },
        methods: {
            save() {
                this.$emit('save');
            },
            showCode() {
                this.codeShow = true;
            },
            open(isEdit) {
                let path = '';
                if (isEdit === 'edit') {
                    // 编辑
                    path = env.sourceHost + '/staticft/#/scene/create/' + this.sceneId + (this.pageNum ? '?pageId=' + this.pageNum : '');
                } else {
                    //预览
                    path = env.sourceHost + '/staticmb/v/' + this.sceneCode + (this.pageNum ? '?toPage=' + this.pageNum : '');
                }
                if (window.deskTopApi) {
                    const { ipcRenderer } = window.deskTopApi.electron;
                    const messageInfos = {
                        type: 'newWindow',
                        options: {
                            url: path,
                        },
                    };
                    ipcRenderer.send('asynchronous-message', messageInfos);
                } else {
                    window.open(path);
                }
            },
        },
    };
</script>

<style scoped lang="scss">
    .footBtn {
        position: fixed;
        bottom: 0;
        right: 0;
        z-index: 100;
        padding: 15px 40px;
        width: calc(100% - 200px);
        box-shadow: 3px -3px 6px 1px #ccc;
        background: #FFFFFF;
        @include flex-bt;
        .btn_group {
            float: right;
            .btn {
                font-size: 14px;
                width: 125px;
                i {
                    margin-right: 5px;
                }
            }
            .plain {
                border-color: $color-blue;
                color: $color-blue;
            }
            .star {
                color: #ffffff;
                background-image: linear-gradient(226deg, #0A32E6 0%, #BC19FA 100%);
            }
        }
    }
</style>